<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Home</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">AR BUSINESS CARD</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="index.jsp">Home</a></li>
				<!-- <li><a href="#about">About</a></li> -->
				<li><a href="contact.jsp">Contact</a></li>
				<li><a href="create_card.jsp">Create card</a></li>
				<li><a href="#">Download</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">

				<!-- Button trigger modal -->
				<!-- Nếu chưa login thì hiện nút login, còn login rồi thì welcome username -->
				<%
					if ((String) session.getAttribute("username") == null) {
				%>
				<button type="button" class="btn btn-primary btn-lg"
					data-toggle="modal" data-target="#myModal">Login</button>
				<%
					} else {
				%>
				</ul>
					<ul class="nav navbar-nav navbar-right">
				<li>
					<div class="welcome ">Welcome ${sessionScope.username }</div>
				</li>

			</ul>
				<%
					}
				%>
				<!-- Modal -->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h3 class="modal-title" id="myModalLabel">Log in to manage
									your account</h3>
							</div>

							<!-- login body -->
							<div class="modal-body">
								<form method="post" action="login">
									<div class="input-group input-group-sm">
										<span class="input-group-addon" id="sizing-addon3">Username:
										</span> <input type="text" class="form-control" name="username"
											placeholder="Username" aria-describedby="sizing-addon3">
									</div>

									<div class="input-group input-group-sm">
										<span class="input-group-addon" id="sizing-addon3">Password:&nbsp;
										</span> <input type="password" class="form-control" name="password"
											placeholder="Password" aria-describedby="sizing-addon3">
									</div> 
									<div class="checkbox">
										<label> <input type="checkbox" name="checkboxRememberMe"> Remember me
										</label>
										<div style="float: right">
											<button type="submit" class="btn btn-primary">Sign
												in</button>
										</div>
									</div>
								</form>
							</div>
							<!-- register body -->
							<div class="modal-footer-final">
								<div styles="text-align:center">
									Do not you have an account? <a href="register.jsp">Sign up</a>
								</div>
							</div>
						</div>
					</div>
			</ul>


		</div>
		<!--/.nav-collapse -->
	</div>
	</nav>

	<div class="container">
		<div class="row">

			<div class="col-xs-12  col-sm-12  col-md-12  col-lg-12">

				<!-- Sile show -->
				<div id="myCarousel" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
						<li data-target="#myCarousel" data-slide-to="3"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="images/s1.png">
						</div>

						<div class="item">
							<img src="images/s2.jpg">
						</div>

						<div class="item">
							<img src="images/s3.jpg">
						</div>

						<div class="item">
							<img src="images/s2.jpg">
						</div>
					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel" role="button"
						data-slide="prev"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a> <a class="right carousel-control" href="#myCarousel" role="button"
						data-slide="next"> <span
						class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>

			</div>
		</div>

		<hr>
		<!-- End Sile show -->
		<div class="row">
			<div class="col-xs-1  col-sm-1 col-md-1  col-lg-1"></div>
			<div class="col-xs-10  col-sm-10 col-md-10  col-lg-10">

				<h2 class="text-middle">Innovative AR and Interactive Print
					Solutions</h2>
				<p style="text-align: center;">
					The Layar App for iOS, Android, BlackBerry and Google Glass has
					been downloaded over <strong>38<br> million times
					</strong>, and more than <strong>90,000 publishers, marketers,
						brands and agencies</strong> are using the <br>self-service Layar
					Creator to build their own AR and Interactive Print campaigns.
				</p>

				<img style="width: 100%; height: 100%"
					alt="Layar Creative Studio showreel"
					src="images/homepage-video-button-final.jpg"> <br>
				<hr>
				<h2 class="text-middle">ADD A TOUCH OF MAGIC TO PRINT</h2>
				<p style="text-align: center;">
					Way better than QR codes – with Layar, any image can be enhanced
					with digital content.<br>Easily place links, videos,
					slideshows and more on top of everyday print materials.
				</p>
				<img style="width: 100%; height: 100%"
					alt="Layar Creative Studio showreel" src="images/s1.png">

			</div>
			<div class="col-xs-1  col-sm-1 col-md-1  col-lg-1"></div>
		</div>

		<div class="row">
			<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
				<h3 class="text-middle">1. Discover</h3>
				<p class="text-middle">
					Look for the Layar call-to-action on<br> magazines, packaging
					and other items.
				</p>
			</div>
			<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
				<h3 class="text-middle">1. Scan</h3>
				<p class="text-middle">
					Scan the item with the free Layar App for<br> iOS, Android or
					BlackBerry.
				</p>
			</div>
			<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
				<h3 class="text-middle">3. Interact</h3>
				<p class="text-middle">
					Enjoy the experience as content comes<br> to life with
					interactivity!
				</p>
			</div>

		</div>
		<hr>
		<br> <br>

	</div>
	<!-- /.container -->
	<footer style="background-color: #123322;min-height:50px">
	<p class="pull-right">
		<a href="#">Back to top</a>
	</p>
	<p style="color:white">
		 2014 Company, Inc.  <a href="#">Privacy</a>  <a href="#">Terms</a>
	</p>
	</footer>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>